{% extends 'base_main.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/main/css/home.css' %}">
{% endblock %}

{% block ext_js %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'axf/main/js/home.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="home">
{#        首页顶部轮播 https://3.swiper.com.cn/usage/index.html#}
        <div class="swiper-container" id="topSwiper">
            <div class="swiper-wrapper">
                {% for main_wheel in main_wheels %}
                    <div class="swiper-slide">
                        <img src="{{ main_wheel.img }}" alt="{{ main_wheel.name }}">
                    </div>
                {% endfor %}
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
{#            首页顶部导航#}
        <div class="topMenu">
            <nav>
                <ul>
                    {% for main_nav in main_navs %}
                        <li>
                            <img src="{{ main_nav.img }}" alt="{{ main_nav.name }}">
                            <span>{{ main_nav.name }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>

{#            首页必购数据#}
        <div class="swiper-container" id="swiperMenu">
            <ul class="swiper-wrapper">
                {% for main_mustbuy in main_mustbuys %}
                    <li class="swiper-slide">
                        <img src="{{ main_mustbuy.img }}" alt="{{ main_mustbuy.name }}">
                    </li>
                {% endfor %}
            </ul>
        </div>

{#            首页商店#}
        <div class="shop_container">
            <h2>
                <img src="{{ main_shop_1.0.img }}" alt="{{ main_shop_1.0.name }}">
            </h2>

            <fieldset>
                {% for main_shop in main_shop_2 %}
                    <a href="#">
                        <img src="{{ main_shop.img }}" alt="{{ main_shop.name }}">
                    </a>
                {% endfor %}

            </fieldset>

            <ul>
                {% for main_shop in main_shop_3 %}
                    <li>
                        <img src="{{ main_shop.img }}" alt="{{ main_shop.name }}">
                        <span>{{ main_shop.name }}</span>
                    </li>
                {% endfor %}

            </ul>

            <ol>
                {% for main_shop in main_shop_4 %}
                    <li>
                        <a href="#">
                            <img src="{{ main_shop.img }}" alt="{{ main_shop.name }}">
                        </a>
                    </li>
                {% endfor %}
            </ol>
        </div>

    </div>
{% endblock %}